<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-form
					class="form"
					:model="form"
					:rules="rules"
				>
					<pure-form-item
						label="姓名"
						prop="name"
					>
						<pure-input
							v-model="form.name"
							placeholder="请输入姓名"
						></pure-input>
					</pure-form-item>
					<pure-line></pure-line>
					<pure-form-item
						label="年龄"
						prop="age"
					>
						<pure-input
							v-model="form.age"
							placeholder="请输入年龄"
						></pure-input>
					</pure-form-item>
				</pure-form>
			</pj-demo>

			<!-- 图标 -->
			<pj-demo title="图标">
				<pure-form
					class="form"
					:model="form"
					:rules="rules"
				>
					<pure-form-item
						prop="name"
						iconName="__home"
					>
						<pure-input
							v-model="form.name"
							placeholder="请输入姓名"
						></pure-input>
					</pure-form-item>
					<pure-line></pure-line>
					<pure-form-item
						prop="age"
						iconName="__home"
					>
						<pure-input
							v-model="form.age"
							placeholder="请输入年龄"
						></pure-input>
					</pure-form-item>
				</pure-form>
			</pj-demo>

			<!-- 标签位置 -->
			<pj-demo title="标签位置">
				<pure-form
					class="form"
					:model="form"
					:rules="rules"
					labelPosition="top"
				>
					<pure-form-item
						label="姓名"
						prop="name"
					>
						<pure-input
							v-model="form.name"
							placeholder="请输入姓名"
						></pure-input>
					</pure-form-item>
					<pure-line></pure-line>
					<pure-form-item
						label="年龄"
						prop="age"
						sublabel="(未成年禁止注册)"
					>
						<pure-input
							v-model="form.age"
							placeholder="请输入年龄"
						></pure-input>
					</pure-form-item>
				</pure-form>
			</pj-demo>

			<!-- 禁用表单 -->
			<pj-demo title="禁用表单">
				<pure-form
					class="form"
					:model="form"
					:rules="rules"
					disabled
				>
					<pure-form-item
						label="姓名"
						prop="name"
					>
						<pure-input
							v-model="form.name"
							placeholder="陈老师儿~"
						></pure-input>
					</pure-form-item>
					<pure-line></pure-line>
					<pure-form-item
						label="年龄"
						prop="age"
					>
						<pure-input
							v-model="form.age"
							placeholder="18"
						></pure-input>
					</pure-form-item>
				</pure-form>
			</pj-demo>

			<!-- 禁用字段 -->
			<pj-demo title="禁用字段">
				<pure-form
					class="form"
					:model="form"
					:rules="rules"
				>
					<pure-form-item
						label="姓名"
						prop="name"
					>
						<pure-input
							v-model="form.name"
							placeholder="嘿嘿，我没被禁用，我能被编辑"
						></pure-input>
					</pure-form-item>
					<pure-line></pure-line>
					<pure-form-item
						label="年龄"
						prop="age"
						disabled
					>
						<pure-input
							v-model="form.age"
							placeholder="啊欧，我被禁用了"
						></pure-input>
					</pure-form-item>
				</pure-form>
			</pj-demo>

			<!-- 表单校验 -->
			<pj-demo title="表单校验">
				<pure-form
					class="form"
					:model="form"
					:rules="rules"
					ref="formRef"
					content-align="right"
				>
					<!-- 文本类型 -->
					<pure-form-item
						label="姓名"
						prop="name"
					>
						<pure-input
							v-model="form.name"
							placeholder="请输入姓名"
						></pure-input>
					</pure-form-item>
					<pure-line></pure-line>

					<!-- 数字类型 -->
					<pure-form-item
						label="年龄"
						prop="age"
					>
						<pure-input
							v-model="form.age"
							placeholder="请输入年龄"
						></pure-input>
					</pure-form-item>
					<pure-line></pure-line>

					<!-- 单选类型 -->
					<pure-form-item
						label="性别"
						prop="sex"
					>
						<pure-radio-group
							v-model="form.sex"
							:options="sexOptions"
							ghost
							style="justify-content: flex-end"
						>
						</pure-radio-group>
					</pure-form-item>
					<pure-line></pure-line>

					<!-- 多选类型 -->
					<pure-form-item
						label="爱好"
						prop="hobby"
					>
						<pure-checkbox-group
							v-model="form.hobby"
							:options="hobbyOptions"
							ghost
							style="justify-content: flex-end"
						>
						</pure-checkbox-group>
					</pure-form-item>
					<pure-line></pure-line>

					<!-- 开关选择器 -->
					<pure-form-item
						label="是否同意并遵守《社区规定》"
						prop="switch"
						label-width="15em"
					>
						<view class="switch-content">
							<text class="text"></text>
							<pure-switch v-model="form.switch"></pure-switch>
						</view>
					</pure-form-item>
					<pure-line></pure-line>

					<!-- Picker 选择器 -->
					<pure-form-item
						label="生日"
						prop="birthday"
						showArrow
						readonly
						@onClick="showPicker = true"
					>
						<pure-input
							v-model="form.birthday"
							placeholder="请选择生日"
						></pure-input>
					</pure-form-item>
					<pure-line></pure-line>

					<!-- Rate 评分 -->
					<pure-form-item
						label="评分"
						prop="rate"
						showArrow
					>
						<pure-rate
							v-model="form.rate"
							class="rate"
						></pure-rate>
					</pure-form-item>
					<pure-line></pure-line>

					<!-- 多行输入 -->
					<pure-form-item
						label="留言"
						prop="message"
						label-position="top"
						content-align="left"
					>
						<pure-textarea
							v-model="form.message"
							placeholder="请输入留言"
							style="width: 100%"
						></pure-textarea>
					</pure-form-item>
					<pure-line></pure-line>

					<pure-gap size="24px"></pure-gap>

					<pure-button
						text="提交"
						theme="primary"
						block
						shape="round"
						@onClick="handleSubmit"
					></pure-button>
					<pure-gap size="12px"></pure-gap>
				</pure-form>
			</pj-demo>

			<!-- 提示一直存在 -->
			<pj-demo
				title="提示一直存在"
				desc="这样显示提示时表单高度不会因为提示而改变"
			>
				<pure-form
					class="form form--always-tips"
					:model="form2"
					:rules="rules2"
					ref="formRef2"
					content-align="right"
					alwaysTips
				>
					<!-- 文本类型 -->
					<pure-form-item
						label="姓名"
						prop="name"
					>
						<pure-input
							v-model="form2.name"
							placeholder="请输入姓名"
						></pure-input>
					</pure-form-item>
					<pure-line></pure-line>

					<!-- 数字类型 -->
					<pure-form-item
						label="年龄"
						prop="age"
					>
						<pure-input
							v-model="form2.age"
							placeholder="请输入年龄"
						></pure-input>
					</pure-form-item>
					<pure-line></pure-line>

					<pure-gap size="24px"></pure-gap>

					<pure-button
						text="提交"
						theme="primary"
						block
						shape="round"
						@onClick="handleSubmit2"
					></pure-button>
					<pure-gap size="12px"></pure-gap>
				</pure-form>
			</pj-demo>
		</view>

		<!-- 生日选择器 -->
		<pure-date-picker
			:show="showPicker"
			@onOk="_handleBirthdayConfirm"
			@onClose="showPicker = false"
			@onNot="showPicker = false"
		></pure-date-picker>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref } from "vue";

	// 表单数据
	const form = ref({
		name: "",
		age: "",
		sex: "",
		hobby: [],
		switch: false,
		message: "",
		birthday: "",
		rate: null
	});

	const form2 = ref({
		name: "",
		age: ""
	});

	// 表单Ref
	const formRef = ref();
	const formRef2 = ref();

	// 表单校验规则
	const rules = ref({
		name: [{ required: true, message: "请输入姓名" }],
		age: [{ required: true, message: "请输入年龄" }],
		sex: [{ required: true, message: "请选择性别" }],
		hobby: [{ required: true, message: "请选择爱好", type: "array" }],
		switch: [
			{
				required: true,
				validator: (rule, value, callback) => {
					if (!value) {
						callback(new Error("请同意遵守《社区规定》"));
						return;
					}
					callback();
				}
			}
		],
		message: [{ required: true, message: "请输入留言" }],
		birthday: [{ required: true, message: "请选择生日" }],
		rate: [{ required: true, message: "请选择评分" }]
	});

	const rules2 = ref({
		name: [{ required: true, message: "请输入姓名" }],
		age: [{ required: true, message: "请输入年龄" }]
	});

	// 性别选项
	const sexOptions = ref([
		{
			label: "我是男生",
			value: "male",
			theme: "primary"
		},
		{
			label: "我是女生",
			value: "female",
			theme: "danger"
		}
	]);

	// 爱好选项
	const hobbyOptions = ref([
		{
			label: "篮球",
			value: "basketball",
			theme: "primary"
		},
		{
			label: "足球",
			value: "football",
			theme: "success"
		},
		{
			label: "跑步",
			value: "running",
			theme: "warning"
		},
		{
			label: "写代码",
			value: "coding",
			theme: "danger"
		}
	]);

	// 生日选项
	const showPicker = ref(false);

	// 提交
	function handleSubmit() {
		// 校验表单
		formRef.value
			.validate()
			.then(() => {
				// 校验通过
				uni.showToast({
					title: "校验通过",
					icon: "success"
				});
			})
			.catch(() => {});
	}

	// 提交2
	function handleSubmit2() {
		// 校验表单
		formRef2.value
			.validate()
			.then(() => {
				// 校验通过
				uni.showToast({
					title: "校验通过",
					icon: "success"
				});
			})
			.catch(() => {});
	}

	// 选择生日
	function _handleBirthdayConfirm(dateStr, items) {
		form.value.birthday = dateStr;
		showPicker.value = false;
	}
</script>

<style lang="scss" scoped>
	.page {
		.form {
			background: var(--pure-background-default);
			padding: 0 16px;
			border-radius: var(--pure-radius-default);
			display: block;

			&--always-tips {
				--pure-form-item-tips-height: 1em;
			}
		}

		.switch-content {
			display: flex;
			flex-direction: row;
			align-items: center;

			.text {
				flex: 1;
				text-align: right;
			}
		}

		.rate {
			font-size: 1.25em;
		}
	}
</style>
